import React, { useState } from 'react';
import s from './chart2.module.css';
import echarts from 'echarts';
import { vulPie } from '~/API';
import { BUG_GRADE } from '@/common/common.js';
import { percent } from '@/common/formatter.js';
import { deepClone } from '@/common/constant.js';
const colorArr = {
  严重: '#ffc0c0',
  高危: '#f90012',
  中危: '#faaf2b',
  低危: '#fed831',
  信息: '#e7eaef',
  创宇安全智脑: '#ff7e08',
  Seebug: '#ffb97c',
};
const locSource = [
  { name: '创宇安全智脑', value: 70, color: '#ff7e08', score: '70%' },
  { name: 'Seebug', value: 30, color: '#ffb97c', score: '30%' },
];

const option = {
  tooltip: {
    trigger: 'item',
    formatter({ name, percent, value }) {
      return `<div style="display:flex;padding:0.5rem">
      <div style="color: #2B2C32;padding-right: 0.25rem">${name}:</div>
      <div style="color: #2B2C32;padding-right: 0.25rem">${value}</div>
      <div style="color: #2B2C32">(${percent}%)</div>
    </div>`;
    },
    backgroundColor: '#f1f1f1',
    textStyle: {
      color: '#9f9fa1',
      fontSize: 12,
    },
  },

  title: {
    text: '漏洞等级占比',
    x: 'center',
    y: 'center',
    textStyle: {
      color: '#2B2C32',
      fontSize: 16,
    },
  },
  series: [
    {
      data: [
        { name: '严重', value: 0 },
        { name: '高危', value: 0 },
        { name: '中危', value: 0 },
        { name: '低危', value: 0 },
      ],
      center: ['50%', '50%'],
      type: 'pie',
      radius: [70, 90],
      avoidLabelOverlap: false,
      hoverOffset: 5,
      label: {
        show: false,
      },
      itemStyle: {
        color: function ({ name }) {
          return colorArr[name];
        },
      },
    },
  ],
};
export default function chart2() {
  const [source, setSource] = useState([]);
  const [severity, setSeverity] = useState([]);
  const getChartData = async (e) => {
    const pie = await vulPie(e);
    const se = pie.data.severity;
    const type = ['5', '4', '3', '2','1'];
    const total = Object.keys(se).reduce((total, key) => {
      if (type.indexOf(key+'') > -1) {
        total += se[key];
      } 
      return total;
    }, 0);
    const severity_ = type.map((e) => {
      const sc = se[e] || 0;
      const score = ((sc / total) * 100).toFixed(2) + '%';
      return { name: BUG_GRADE[e], value: sc, color: colorArr[BUG_GRADE[e]], score };
    });
    setSource(locSource);
    setSeverity(severity_);
  };
  React.useMemo(() => {
    const params = { fields: 'source,severity' };
    getChartData(params);
  }, []);
  const chart2SpanColor = (num) => {
    return (
      <>
        {num.map((e,i) => {
          return (
            <p key={i} style={{'margin-right': i===2?'0':"16px"}}>
              <span
                className={s.legendC}
                style={{ 'background-color': e.color}}
              ></span>
              {e.name}
              <span className={s.score}>{e.score}</span>
            </p>
          );
        })}
      </>
    );
  };
  React.useEffect(() => {
    const chart2_1 = echarts.init(document.getElementById('chart2_1'));
    option.series[0].data = severity;
    chart2_1.setOption(option, true);
    chart2_1.resize();
  }, [severity]);
  // 漏洞来源图
  // React.useEffect(() => {
  //   const option2 = deepClone({}, option);
  //   option2.title.text = '漏洞来源占比';
  //   option2.series[0].data = source;
  //   const chart2_2 = echarts.init(document.getElementById('chart2_2'));
  //   chart2_2.setOption(option2, true);
  // }, [source]);
  return (
    <div className={s.chart2}>
      <div className={s.chart2_1}>
        <div id="chart2_1" style={{ width: '20rem', height: '15rem' }}></div>
        <div className={s.legendBox}>{chart2SpanColor(severity)}</div>
      </div>
      {/*  漏洞来源图
      <div className={s.chart2_2}>
        <div id="chart2_2" style={{ width: '15rem', height: '15rem' }}></div>
        <div className={s.legendBox2}>{chart2SpanColor(source)}</div>
      </div> */}
    </div>
  );
}
